<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Basic Embedding Gate One</title>
    <!-- <script src="static/gateone.js"></script> -->
    <script src="https://123.57.91.102:442/static/gateone.js"></script>
    <!-- <script src="callbackInit.js"></script> -->
    <script>
      window.onload = function() {
          // Initialize Gate One:
          // GateOne.init({url: 'https://123.57.91.102:442'});
          GateOne.init({
            url: 'https://123.57.91.102:442',
            embedded: true,
            // Let's apply some custom styles while we're at it ...
            style: { 'background-color': 'yellowgreen', 'box-shadow': '0 0 40px blueViolet'}
        });
      }
    </script>
  </head>
  <body>
<div>Hello GateOne!</div>
<!-- Decide where you want to put Gate One -->
  <div id="gateone_container" style="position: relative; width: 60em; height: 30em;">
      <div id="gateone"></div>
  </div>

  <form id="add_terminal">
   <input type="submit" value="Add a Terminal" style="margin-left: .Sem;"></input>
  </form>
  <script>
    document.querySelector('#add_terminal').onsubmit = function(e) {
        // Don't actually submit the form
        e.preventDefault(); 
        var existingContainer = GateOne.Utils.getNode('#'+GateOne.prefs.prefix+'container');
        var container = GateOne.Utils.createElement('div', {
               'id': 'container', 'class': 'terminal', 'style': {'height': '100%', 'width': '100%'}
        });
        var gateone = GateOne.Utils.getNode('#gateone');
        if (!existingContainer) {
           gateone.appendChild(container);
        } else {
           container = existingContainer;
        }
        // Create the new terminal
        termNum = GateOne.Terminal.newTerminal(null, null, container); 
    }
  </script>
  </body>
</html>